<template>
	<div class="mineEdit">
		<div class="header">
			<el-button type="primary" @click="fanhui" style="margin-left: 85%;width: 90px;">返回</el-button>
		</div>
		<el-row class="wrap">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="门店logo :" prop="imgUrl">
					<el-col :span="12" class="inner">
						<!-- {{ruleForm.imgUrl}} -->
						<el-upload :action="baseUrl+'outlets/addLogo'" :on-change="ImgChange" class="avatar-uploader"
							:before-upload="beforeAvatarUpload" ref="upload">
							<img slot="trigger" v-if="flag2" :src="ruleForm.imgUrl" class="avatar">
							<img slot="trigger" v-if="flag1" :src="baseUrl+ruleForm.imgUrl" class="avatar">
						</el-upload>
					</el-col>
				</el-form-item>
				<el-form-item label="门店名称 :" prop="outletName">
					<el-col :span="12" class="inner">
						
						<el-input type="text" v-model="ruleForm.outletName"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="负责人 : " prop="adminId">
					<el-col :span="12" class="inner">
						<!-- <span>{{value}}</span> -->
						<template>
							<el-select v-model="ruleForm.adminId" placeholder="请选择">
								<el-option v-for="item in optionsList" :key="item.adminId" :label="item.adminName"
									:value="item.adminId">
								</el-option>
							</el-select>
						</template>
					</el-col>
				</el-form-item>
				<el-form-item label="营业时间 : " prop="value1">
					<el-col :span="12" class="inner">
						<!-- <el-input type="text" v-model="tableData.outletOpenTime"></el-input> -->
						<template>
							<el-time-picker is-range value-format="HH:mm" v-model="ruleForm.value1" range-separator="至"
								start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
							</el-time-picker>
						</template>
					</el-col>
				</el-form-item>
				<el-form-item label="门店地址 : " prop="numberaddress">
					<el-col :span="12" class="inner">
						<el-cascader class="address" v-model="ruleForm.numberaddress" :options="options" @change="ChangeAddress">
						</el-cascader>
					</el-col>
				</el-form-item>
				<el-form-item label="原门店地址 : " prop="outletAddress">
					<el-tooltip class="item" effect="dark" :content="ruleForm.outletAddress" placement="top">
					     <el-col :span="12" class="inner">
					     	<el-input type="text" v-model="ruleForm.outletAddress" disabled style="color: #000;"></el-input>
					     </el-col>
					</el-tooltip>
					
				</el-form-item>
				<el-form-item label="详细地址 : " prop="detailaddress">
					<el-col :span="12" class="inner">
						<el-input v-model="ruleForm.detailaddress" placeholder="详细地址"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="联系方式 : " prop="outletPhone">
					<el-col :span="12" class="inner">
						<el-input type="text" v-model="ruleForm.outletPhone"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="备注 : " prop="outletDescr">
					<el-col :span="12" class="inner">
						<el-input type="text" v-model="ruleForm.outletDescr"></el-input>
					</el-col>
				</el-form-item>
			</el-form>
		</el-row>
		<el-button class="btn" @click="mineChange('ruleForm')" type="primary">确定</el-button>
		<el-button class="btn" @click="resetting('ruleForm')" type="warning">重置</el-button>
	</div>
</template>

<script>
	import {
		codeToText,
		regionData
	} from 'element-china-area-data'
	export default {
		data() {
			return {
				options: regionData,
				baseUrl: require('../assets/baseUrl.js').baseUrl,
				outletId: "",
				flag: true,
				optionsList: [],
				tableData: [],
				flag1:true,
				flag2:false,
				
				image: "",
				//地址省市区+详细地址组合
				address:"",
				
				
				ruleForm: {
				  imgUrl: "",
				  outletName:"",
				  adminId:"",
				  value1: "",  //营业时间
				  numberaddress: "",  //省市区三级联动的地址数字
				  outletAddress:"",    //原门店地址
				  detailaddress:"",   //详细地址
				  outletPhone:"",   //电话号码
				  outletDescr:""    //备注
				},
				rules: {
				  imgUrl: [
				    {
				    	required: true,
				    	message: '图片不能为空',
				    	trigger: 'blur'
				    }
				  ],
				  outletName: [
				    {
				    	required: true,
				    	message: '门店名不能为空',
				    	trigger: 'blur'
				    }
				  ],
				  adminId: [
				   {
				   	required: true,
				   	message: '负责人不能为空',
				   	trigger: 'blur'
				   }
				  ],
				  // value1: [
				  //   {
				  //   	required: true,
				  //   	message: '时间不能为空',
				  //   	trigger: 'blur'
				  //   }
				  // ],
				  // numberaddress: [
				  //   {
				  //   	required: true,
				  //   	message: '门店地址不能为空',
				  //   	trigger: 'blur'
				  //   }
				  // ],
				  // detailaddress: [
				  //  {
				  //  	required: true,
				  //  	message: '门店地址不能为空',
				  //  	trigger: 'blur'
				  //  }
				  // ],
				  outletPhone: [
				    {
				    	required: true,
				    	message: '联系电话不能为空',
				    	trigger: 'blur'
				    }
				  ],
				  outletDescr: [
				    {
				    	required: true,
				    	message: '备注不能为空',
				    	trigger: 'blur'
				    }
				  ]
				},
				
				
				
			}
		},
		methods: {
			ImgChange(file, fileList) {
				if (file.response != undefined) {
					this.image = file.response.msg
					// console.log(this.image)
				}
				this.ruleForm.imgUrl = URL.createObjectURL(file.raw);
				this.flag1=false
				this.flag2=true
				
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif");
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			// 地址位置 转换 为地址
			ChangeAddress(value) {
				this.address = codeToText[this.ruleForm.numberaddress[0]] + '' + codeToText[this.ruleForm.numberaddress[
					1]] + '' + codeToText[this.ruleForm.numberaddress[2]]
			},
			//确认修改
			mineChange(formName) {
				// http://localhost:8081/outlets/outlet/updateOutletInfo
				var opentime = this.ruleForm.value1.toLocaleString()
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$http.post(this.baseUrl + "outlets/outlet/updateOutletInfo", {
							outletName: this.ruleForm.outletName,
							adminId: Number(this.ruleForm.adminId),
							outletOpenTime: opentime,
							outletAddress: this.address+this.ruleForm.detailaddress,
							outletPhone: this.ruleForm.outletPhone,
							outletDescr: this.ruleForm.outletDescr,
							outletLogo: this.image,
							outletId: Number(this.outletId)
						}).then(res => {
							if(res.data.code==200){
								this.$message.success("更新成功")
								this.$router.go(-1)
							}
						})
						
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
				
			},
			//返回上一级
			fanhui() {
				this.$router.push("/homepage/minecenter")
			},
			//查询门店
			getStore() {
				// http://localhost:8081/outlets/outlet/getAllOutletsByAdminId
				this.$http.post(this.baseUrl + "outlets/getOutletById", {
					id: Number(this.outletId)
				}).then(res => {
					if (res.data.code == 200) {
						//获取到当前门店的内容
						this.tableData = res.data.data
						
						//给输入框赋默认值
						this.ruleForm.imgUrl=this.tableData.outletLogo
						this.ruleForm.outletName=this.tableData.outletName
						this.ruleForm.adminId=this.tableData.adminId
						this.ruleForm.outletAddress=this.tableData.outletAddress
						this.ruleForm.outletPhone=this.tableData.outletPhone
						this.ruleForm.outletDescr=this.tableData.outletDescr
					}
				})
			},
			//重置
			resetting(formName) {
				this.$refs[formName].resetFields();
				this.ruleForm.imgUrl=""
				this.ruleForm.outletName=""
				this.ruleForm.adminId=""
				this.ruleForm.outletPhone=""
				this.ruleForm.outletDescr=""
			},
			//查询所有管理员
			admin() {
				this.$http.post(this.baseUrl + "outlets/getAdminNames", {}).then(res => {
					this.optionsList = res.data.data.admins
				})
			}
		},
		mounted() {
			this.admin()
			this.outletId = this.$route.query.outletId
			this.getStore()


		}
	}
</script>

<style>
	.mineEdit {
		margin-left: 20px;
	}

	.mineEdit .header {
		margin-top: 20px;
	}

	/* 表格 */
	.mineEdit .btn {
		width: 90px;
		margin-left: 30px;
	}

	.mineEdit .logo {
		width: 60px;
		height: 60px;
		border-radius: 50px;
	}

	.mineEdit .wrap .inner {
		display: flex;
		align-items: center;
		height: 70px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.mineEdit .el-form-item__label{
		line-height: 90px;
	}
	.mineEdit .button {
		margin-left: 20px;
		width: 100px;
	}


	.mineEdit .avatar-uploader .el-upload {
		/* border: 1px dashed #d9d9d9; */
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.mineEdit .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.mineEdit .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.mineEdit .avatar {
	 	width: 70px;
		height: 70px;
		border-radius: 50px;
		display: block;
	}
	.mineEdit .el-range-editor .el-range-input{
		height: 38px;
		
	}
	
	
	.mineEdit .el-form-item{
		display: inline-block;
		width: 40%;
	}
	.mineEdit .el-form-item{
		margin-bottom: 0;
	}
	
	.mineEdit .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
		display: none;
	}
</style>